<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.barrage .screen {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0px;
				right: 0px;
			}

			.barrage .screen .s_close {
				z-index: 2;
				top: 20px;
				right: 20px;
				position: absolute;
				text-decoration: none;
				width: 40px;
				height: 40px;
				border-radius: 20px;
				text-align: center;
				color: #fff;
				background: #000;
				line-height: 40px;
				display: none;
			}

			.barrage .screen .mask {
				position: relative;
				width: 100%;
				height: 100%;
				background: #000;
				opacity: 0.5;
				filter: alpha(opacity:1);
				z-index: 1;
			}

			.barrage {
				display: none;
				width: 100%;
				height: 100%;
			}

			.barrage .screen .mask div {
				position: absolute;
				font-size: 20px;
				font-weight: bold;
				white-space: nowrap;
				line-height: 40px;
				z-index: 40;
			}

			.barrage .send {
				z-index: 1;
				width: 100%;
				height: 55px;
				background: #000;
				position: absolute;
				bottom: 0px;
				text-align: center;
			}

			.barrage .send .s_text {
				width: 600px;
				height: 40px;
				line-height: 10px;
				font-size: 20px;
				font-family: "微软雅黑";
			}

			.barrage .send .s_btn {
				width: 105px;
				height: 40px;
				background: #22B14C;
				color: #fff;
			}
		</style>
		<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>
		<a href="#" class="showBarrage">打开弹幕</a>
		<div class="barrage">
			<div class="screen">
				<a href="#" class="s_close">X</a>
				<div class="mask">
					<!--内容在这里显示-->
				</div>
			</div>
			<!--Send Begin-->
			<div class="send">
				<input type="text" class="s_text" />
				<input type="button" class="s_btn" value="说两句" />
			</div>
			<!--Send End-->
			<span class="s_close">X</span>
		</div>
		<script>
			$(function() {

				$(".showBarrage,.s_close").click(function() {

					$(".barrage,.s_close").toggle("slow");

				});

				init_animated();

			})

			//提交评论

			$(".send .s_btn").click(function() {

				var text = $(".s_text").val();

				if (text == "") {

					return;

				};

				var _lable = $("<div style='right:20px;top:0px;opacity:1;color:" + getRandomColor() + ";'>" + text + "</div>");

				$(".mask").append(_lable.show());

				init_barrage();

			})

			//初始化弹幕技术

			function init_barrage() {

				var _top = 0;

				$(".mask div").show().each(function() {

						var _left = $(window).width() - $(this).width(); //浏览器最大宽度，作为定位left的值

						var _height = $(window).height(); //浏览器最大高度

						_top += 75;

						if (_top >= (_height - 130)) {

							_top = 0;

						}

						$(this).css({
							left: _left,
							top: _top,
							color: getRandomColor()
						});

						//定时弹出文字

						var time = 10000;

						if ($(this).index() % 2 == 0) {

							time = 15000;

						}

						$(this).animate({
							left: "-" + _left + "px"
						}, time, function() {

							$(this).remove();

						});

					}

				);

			}

			//获取随机颜色

			function getRandomColor() {

				return '#' + (function(h) {

						return new Array(7 - h.length).join("0") + h

					}

				)((Math.random() * 0x1000000 << 0).toString(16))

			}
		</script>
	</body>

</html>
